<template>
    <el-container class="panel-container color_yueBai" >
        <el-aside class="back—image-aside bg-xing-lang" width="20%" >
            <div>
                <p>当前时间：{{ currentTime }}</p>
                <p>经过时间：{{ timeCount }} 秒</p>
                <p>经验：{{ exp }} </p>
                <p>境界：{{ levelName }} </p>
                <button @click="startTimer">开始计时</button>
                <button @click="stopTimer">停止计时</button>
            </div>

        </el-aside>
        <el-divider class="border-outset" height="100%" direction="vertical"/>
        <el-main class="back—image-main"></el-main>
    </el-container>
</template>
<script>
	export default {
		name: 'BasicPanel',
        data(){
            return{
                timer: null, // 存储定时器的ID
                timeCount: 0,
                exp: 0,
                level:0,
                levelName:"筑基",
                currentTime: new Date().toLocaleTimeString() // 当前时间
            }
        },
        methods: {
            timeEvent(){
                this.updateTime();
                this.updateExp();
            },
            updateExp() {
                this.exp = this.timeCount * 2;
                // 九段（境）：九段（天枢境）、八段（天璇境）、七段（天玑境）、六段（天权境）、五段（玉衡境）、四段（开阳境）、三段（瑶光境）、二段（洞明境）、一段（隐元境-

                if (exp > 1000){
                    this.level = 1;
                    this.levelName = "隐元境";
                }else if (exp > 2000){
                    this.level = 2;
                    this.levelName = "洞明境";
                }
            },
            updateTime() {
                this.currentTime = new Date().toLocaleTimeString();
                this.timeCount ++;
            },
            startTimer() {
                if (!this.timer) {
                    this.timer = setInterval(this.timeEvent, 1000);
                }
            },
            stopTimer() {
                if (this.timer) {
                    clearInterval(this.timer);
                    this.timer = null;
                }
            },

        },
        mounted() {
            this.startTimer();
        },
        beforeUnmount() {
            this.stopTimer();
        },
    }
</script>

<style scoped>
    .panel-container{
        height: 100%;
    }
    .back—image-main{
        background-image: url("../../assets/cultivation/InkLandscape.png");
        background-size: 100% 100%;
    }
    .back—image-aside{
        background-image: url("../../assets/cultivation/InkTreeCloud.png");
        background-repeat:no-repeat;
        background-size: cover;
    }

    .border-outset {
        border-style: outset;
    }

    .el-divider--vertical{
        display:inline-block;
        width:1px;
        height:100%;
        margin:0;
        vertical-align:middle;
        position:relative;
    }

</style>
